<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>ZUI -表单验证控件</title>
	
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <link rel="stylesheet" type="text/css" href="css/button.css">
	<link rel="stylesheet" type="text/css" href="css/validate.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-mvalidate.js"></script>

    <!--<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js"></script>
    <script type="text/javascript" src="js/zepto-mvalidate.js"></script>-->
	
</head>
<body class="demo-bgf2f2f2">
	<header class="zui-header">
		<i class="zicon-goback icon-fanhui" onClick="javascript :history.back(-1);"></i>
		<h1 class="title">表单验证控件</h1>
	</header>
	
	<div class="demo-hd-1 ml10 mr10">验证类型2</div>
	<div class="zui-mr10 zui-mb10 zui-ml10 demo-bgfff pd10">
		<form class="zform zform-radius" action="https://www.baidu.com" id="form2">
                <fieldset class="zform-fieldset">       
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" class="field-text" placeholder="请输入用户名" data-required="true" data-descriptions="username" data-describedby="username-description">
                        </div>
                        <div id="username-description"></div>     
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="pwd2" class="field-text" placeholder="请输入密码" data-required="true" data-descriptions="password" data-describedby="password-description"  data-conditional="pwd2">
                        </div> 
                        <div id="password-description"></div>    
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="password" id="confirmpwd2" class="field-text"  placeholder="再次输入密码确认" data-required="true" data-descriptions="confirmpassword" data-conditional="confirmpwd2" data-describedby="confirmpassword-description">
                        </div>
                        <div id="confirmpassword-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入手机号码" data-validate="phone" data-describedby="phone-description">
                        </div>
                        <div id="phone-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <input type="text" class="field-text" placeholder="请输入年龄" data-pattern="^[0-9]+$"  data-required="true" data-descriptions="age" data-describedby="age-description">
                        </div>
                        <div id="age-description"></div>
                    </div>
                    <div class="zform-control">
                        <div class="control-field">
                            <select class="field-select" data-required="true" data-descriptions="address" data-describedby="address-description" placeholder="请选择省事">
                                <option value="" selected disabled>请选择地址</option>
                                <option value="1">浙江省</option>
                                <option value="2">海南省</option>
                            </select>
                        </div>
                        <div id="address-description"></div>
                    </div>
                    <div class="zform-control">
                        
                        <div class="control-field">
                            <textarea class="field-area" placeholder="个人简介" rows="4" data-required="true" data-descriptions="intro" data-describedby="intro-description"></textarea>
                        </div>
                        <div id="intro-description"></div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">兴趣爱好：</label>
                        <div class="control-field">
                            <label>
                                <input type="checkbox"  name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">篮球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">足球
                            </label>    
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">排球
                            </label>
                            <label>
                                <input type="checkbox" name="favourite" class="field-check zicon" data-required="true" data-descriptions="favourite" data-describedby="favourite-description">乒乓球
                            </label>    
                        </div>
                        <div id="favourite-description"></div>
                    </div>
                    <div class="zform-control zform-control-radiocheck">
                        <label class="control-label">性别：</label>
                        <div class="control-field">
                            <label>
                                <input type="radio" name="sex" class="field-radio  zicon" data-required="true"  data-descriptions="sex" data-describedby="sex-description">男
                            </label>    
                            <label>
                                <input type="radio"  name="sex" class="field-radio  zicon" data-required="true" data-descriptions="sex" data-describedby="sex-description">女
                            </label>    
                        </div>
                        <div id="sex-description"></div>
                    </div>
                    <div class="zform-control clearfix">
                        <label class="control-label control-label-area fl line-form">验证码：</label>
                        <div class="control-field fl">
                            <input type="text" name="captchaCode" class="field-text" data-required="true" data-descriptions="captchacode"  data-describedby="captchacode-description" data-conditional="captcha" id="J_captchaCode">
                        </div>
                        <div class="fl">
                            <img id="captcha_img" border="1" src="php/captcha.php?r=<?php echo rand();?>" width="100">
                            <a href="javascript:void(0)" id="captcha_btn" class="line-form">看不清</a>
                        </div>
                        <div id="captchacode-description" class="clearboth"></div>
                    </div>
                </fieldset>
                <input type="submit" value="提交" class="zbtn zbtn-primary zbtn-full zbtn-lg">   
        </form>
	</div>

	
	<script type="text/javascript">
   $(function(){
        var captchaCodeVal;
        $("#captcha_btn").on("click",function(){
            var src='php/captcha.php?r=Math.random()';
            $("#captcha_img").attr("src",src);
            $.ajax({
                url:"php/captchaAjax2.php",
                type:"get",
                success:function(data){
                    captchaCodeVal=data;
                }
            });
            $("#J_captchaCode").val("").trigger("keyup");

        }).trigger('click');

        
        $.mvalidateExtend({
            phone:{
                required : true,   
                pattern : /^0?1[3|4|5|8][0-9]\d{8}$/,
                each:function(){  
                },
                descriptions:{
                    required : '<div class="field-invalidmsg">请输入手机号码</div>',
                    pattern : '<div class="field-invalidmsg">您输入的手机号码格式不正确</div>',
                    valid : '<div class="field-validmsg">正确</div>'
                }
            }
        });
       
        $("#form2").mvalidate({
            type:2,
            onKeyup:true,
            sendForm:true,
            firstInvalidFocus:true,
            eachField:function(){

            },
            valid:function(){
                
            },
            invalid:function(){
               
            },
            eachValidField:function(){
              
            },
            eachInvalidField:function(){
               
              
            },
            conditional:{
                pwd2:function(val,options){
                    $("#confirmpwd2").trigger("keyup."+options.namespace);
                    return true;
                },
                confirmpwd2:function(val){
                    var flag;
                    return (val==$("#pwd2").val()) ? true :false; 
                },
                captcha:function(val){
                    
                    return captchaCodeVal==val;
                }
                

            },
            descriptions:{
                username:{
                    required : '<div class="field-invalidmsg">请输入用户名</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                password:{
                     required : '<div class="field-invalidmsg">请输入密码</div>',
                     conditional : '<div class="field-validmsg">验证通过</div>',
                     valid : '<div class="field-validmsg">验证通过</div>'
                },
                confirmpassword:{
                    required : '<div class="field-invalidmsg">请再次输入密码</div>',
                    conditional : '<div class="field-invalidmsg">两次密码不一样</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                age : {
                    required : '<div class="field-invalidmsg">请输入年龄</div>',
                    pattern : '<div class="field-invalidmsg">你输入的格式不正确</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                address:{
                    required : '<div class="field-invalidmsg">请选择地址</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                intro:{
                    required : '<div class="field-invalidmsg">请输入个人介绍</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                favourite:{
                    required : '<div class="field-invalidmsg">请选择个人爱好</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                sex:{
                    required : '<div class="field-invalidmsg">请输入性别</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                },
                captchacode:{
                    required : '<div class="field-invalidmsg">请输入验证码</div>',
                    conditional:'<div class="field-invalidmsg">您输入的验证码不正确</div>',
                    valid : '<div class="field-validmsg">验证通过</div>'
                }
            }
        });
   })
</script>
</body>
</html>